<template>
  <el-table-column :sortable="sortable" :prop="property" :label="label" :width="width">
    <template #default="{row, column, $index}">
      <div @click.stop>
        <i :class="!!row[props.property]?'fa fa-image text-primary': 'fa fa-warning text-gray'"
           :title="!!row[props.property]?'点击查看图片！':'暂无图片资源！'"
           @click="openAlbum" style="cursor: pointer;"></i>
      </div>
    </template>
  </el-table-column>
</template>

<script setup lang="ts">
/* eslint-disable */

/**
 * 表格行内图片
 *
 * 图片缩略图是一个 icon，而不是图片，需要点击之后，才能查看大图。
 *
 * 主要是不希望大批量加载图片，造成界面卡顿
 *
 * 客户可能仍然想要一个图片缩略图，封装方式可以提供参考
 */
const props = defineProps({
    // 宽度
    width: {type: [Number, String], default: undefined}
    // 字段名
    , property: String
    // 列名
    , label: String
    // 列名
    , sortable: {type: [Boolean, String], default: false}
});

/**
 * 打开相册
 */
const openAlbum = () => {
    if (Layers.isNotEmpty(props.value)) {
        Eventbus.openAlbum(props.value)
    }
};
</script>
